<template>
	<div>
		<div style="position: relative;padding:20px;border-radius: 8px;" class="bgfff">

			<div style="display: flex;">
				<div style="width: 180px;position: relative;">
					<div class="">问题工单详情</div>

					<div
						style="position: absolute;top: 60px;text-align: right;width: 100%;line-height: 90px;font-size: 13px;color:#F12323;height:450px">
						<div v-for="(item,index) in detail.itemList" :key="index">
							<div v-if="item.status =='COMPLETE'" style="height: 89px;"></div>
							<div v-else>{{item.statusStr}}</div>
						</div>
					</div>
				</div>

				<div style="width: calc(100% - 180px);">

					<div style="display:flex;justify-content:space-between" class="mb10">
						<div style="color:#333;font-size:16px;">
							<span class="mr10">{{detail.scheduleTypeStr}}</span>
							<!-- <el-tag>{{detail.urgencyStr}}</el-tag> -->
						</div>
						<div v-if="detail.status == 'WAIT_DISTRIBUTE' && detail.canDistribute"
							@click="dialogVisible = true,params2={}" class="displayFlex point"
							style="border:1px solid#3A3EF4;color:#3A3EF4;padding:3px 8px;border-radius: 2px;">
							<img src="@/assets/sIcon93.png" style="width: 14px;height: 14px;margin-right: 10px;" />
							<span>分配</span>
						</div>
					</div>

					<div v-if="detail.problemImgUrlList && detail.problemImgUrlList.length > 0" class="mb10">
						<div style="backround:#484848;width: 195px; height: 123px;margin-right: 10px;display: inline-block;border:1px solid#f5f5f5;border-radius: 4px;"
							v-for="(item,index) in detail.problemImgUrlList" :key="index">
							<el-image style="width:100%;height:100%" :src="fileViewUrl+item" fit="contain" :preview-src-list="[fileViewUrl+item]"></el-image>
						</div>
					</div>

					<div style="color:#888;margin-bottom:10px;">{{detail.problemContent}}</div>
					<div style="color:#888;">来源：{{detail.sourceStr}} {{detail.createTime}}</div>

					<div style="width: 600px;text-align: left;padding-top: 10px;">
						<steps :space="90" :active="detail.active" direction="vertical">
							<step v-for="(item1,index1) in detail.itemList" :key="index1" :title="item1.itemTypeStr"
								:description="item1.createTime" :detail="detail" :item="item1">
								<i v-if="item1.isExist" class="step01" slot="icon"></i>
								<i v-else-if="item1.status=='ONGOING'" class="step02" slot="icon"></i>
								<div v-else slot="icon"
									style="width: 18px;height: 18px;border-radius: 50%;border: 1px solid rgb(221, 221, 221);background: #fff;margin-bottom: 6px;">
								</div>
							</step>
						</steps>

						<div v-if="detail.solvedResult" style="margin-top: -40px;">
							<div class="displayFlex mb10">
								<div v-if="detail.solvedResult == 'SOLVED'"
									style="background: #DBEEEE;color: #3D5B53;padding: 5px 10px;">
									{{detail.solvedResultStr}}
								</div>
								<div v-else style="background: #FAF0EB;color: #3D5B53;padding: 5px 10px;">
									{{detail.solvedResultStr}}
								</div>
								<div style="color:#666;" class="ml10">{{detail.solvedContent}}</div>
							</div>

							<div v-if="detail.solvedImgUrlList && detail.solvedImgUrlList.length > 0" class="mb10">
								<div style="backround:#484848;width: 195px; height: 123px;margin-right: 10px;display: inline-block;border:1px solid#f5f5f5;border-radius: 4px;"
									v-for="(item,index) in detail.solvedImgUrlList" :key="index">
									<el-image style="width:100%;height:100%" :src="fileViewUrl+item"
										fit="contain"></el-image>
								</div>
							</div>
							<div style="font-size:13px;color:#8A8A8A">
								<span>处理人：{{detail.solvedByName}}</span>
								<span style="margin-left: 20px;">{{detail.solvedTime}}</span>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>

		<div style="position: relative;padding:20px;border-radius: 8px;display: flex;" class="bgfff mt20"
			v-if="detail.status == 'APPROVING' || detail.status == 'COMPLETE'">
			<div style="width: 180px;">
				反馈和总结
			</div>

			<div style="width:calc(100% - 600px)">
				<div style="color: #8A8A8A;font-size:13px;height: 40px;float: right;">
					<span v-if="detail.checkByName">记录人：{{detail.checkByName}}</span>
					<span v-if="detail.checkTime" class="ml10">{{detail.checkTime}}</span>
				</div>
				<div>
					<el-input placeholder="请描述反馈和总结" type="textarea" autosize show-word-limit maxlength="2000"
						v-model="detail.checkContent" />
				</div>

				<div class="displayFlex mt20" v-if="detail.status != 'COMPLETE' && detail.canCheck">
					<el-button type="primary" @click="closeProblem">关闭工单</el-button>
					<el-button type="danger" @click="tuihuiShow = !tuihuiShow">退回</el-button>
				</div>
			</div>
		</div>


		<div style="position: relative;padding:20px;border-radius: 8px;display: flex;" class="bgfff mt20"
			v-if="detail.backContent && detail.status == 'BACK'">
			<div style="width: 180px;">
				退回意见
			</div>

			<div style="width:calc(100% - 600px)">
				<div>
					<el-input placeholder="请描述退回意见" type="textarea" autosize show-word-limit maxlength="2000"
						v-model="detail.backContent" />
				</div>

				<!-- <div class="displayFlex mt20" v-if="detail.status != 'COMPLETE'">
					<el-button type="primary" @click="confirmBackProblem">确认退回</el-button>
				</div> -->
			</div>
		</div>

		<el-dialog title="退回意见" :visible.sync="tuihuiShow" width="30%">
			<div style="width:100%">
				<div>
					<el-input placeholder="请描述退回意见" type="textarea" autosize show-word-limit maxlength="2000"
						v-model="detail.backContent" />
				</div>

				<div class="mt20 textCenter" v-if="detail.status != 'COMPLETE'" style="margin:0 auto;">
					<el-button type="primary" @click="confirmBackProblem">确认退回</el-button>
				</div>
			</div>
		</el-dialog>


		<el-dialog title="分配" :visible.sync="dialogVisible" width="30%">
			<el-form ref="form" :model="params2" label-width="80px">
				<el-form-item label="执行人">
					<el-select v-model="params2.planSolvedBy" placeholder="请选择执行人" style="width: 100%;">
						<el-option v-for="item in dataList3" :label="item.userName" :value="item.userId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="完成时间">
					<el-date-picker type="date" placeholder="完成时间" v-model="params2.planSolvedTime"
						value-format="yyyy-MM-dd" style="width:100%"></el-date-picker>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="params2.planSolvedRemark" type="textarea"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false,params2={}">取 消</el-button>
				<el-button type="primary" @click="distribute">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import moment from 'moment'
	import steps from '@/components/steps/src/steps'
	import step from '@/components/steps/src/step'

	let that
	export default {
		components: {
			steps: steps,
			step: step
		},
		data() {
			return {
				fileViewUrl: 'https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload/view?appKey=5da5441f62e48aedc7a3853ffc75c2db&prodID=gf&fileID=',
				params: {
					id: ''
				},
				params2: {},
				detail: {},
				dialogVisible: false,
				tuihuiShow: false,
				dataList3: []
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.id = that.getQueryString("id")

			that.getGoingSimpleList()
			that.getPlanExecutorList()
		},

		methods: {

			confirmBackProblem() {
				if (!that.detail.backContent) return that.$message.error("请填写退回意见")
				this.$confirm('此操作退回工单, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/bbep/problemOrder/back',
						contentType: 'application/json',
						data: JSON.stringify({
							id: that.detail.id,
							backContent: that.detail.backContent
						}),
						success: function(result) {
							that.tuihuiShow = false
							that.getGoingSimpleList()
						},
					})
				})
			},

			closeProblem() {
				if (!that.detail.checkContent) return that.$message.error("请填写反馈和总结")
				this.$confirm('此操作关闭工单, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/bbep/problemOrder/check',
						contentType: 'application/json',
						data: JSON.stringify({
							id: that.detail.id,
							checkContent: that.detail.checkContent
						}),
						success: function(result) {
							that.getGoingSimpleList()
						},
					})
				})
			},

			distribute() {
				if (!that.params2.planSolvedBy) return that.$message.error("执行人必填！")
				that.params2.orderId = that.params.id
				that.ajax({
					url: 'bbep/problemOrder/distribute',
					contentType: 'application/json',
					data: JSON.stringify(that.params2),
					success: function(result) {
						that.$message.success("分配成功！")
						that.dialogVisible = false
						that.getGoingSimpleList()
					},
				})
			},

			getPlanExecutorList() {
				that.ajax({
					url: '/documentEntSchedule/getPlanExecutorList',
					contentType: 'application/x-www-form-urlencoded',
					data: {},
					success: function(result) {
						that.dataList3 = result.data
					}
				})
			},

			getGoingSimpleList() {
				that.ajax({
					url: 'bbep/problemOrder/getDetailById',
					contentType: 'application/x-www-form-urlencoded',
					data: {
						id: that.params.id
					},
					success: function(result) {
						result.data.active = 0
						for (let key in result.data.itemList) {
							if (result.data.itemList[key].isExist) result.data.active = Number(key) + 1
						}
						that.detail = result.data
						that.validateDistribute()
					},
				})
			},


			validateDistribute() {
				that.ajax({
					url: 'bbep/problemOrder/config/validateDistribute',
					contentType: 'application/x-www-form-urlencoded',
					data: {
						scheduleType: that.detail.scheduleType
					},
					success: function(result) {
						that.detail.canDistribute = result.data
						that.$forceUpdate()
					},
				})

				that.ajax({
					url: 'bbep/problemOrder/config/validateCheck',
					contentType: 'application/x-www-form-urlencoded',
					data: {
						scheduleType: that.detail.scheduleType
					},
					success: function(result) {
						that.detail.canCheck = result.data
						that.$forceUpdate()
					},
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	>>>.el-step__title.is-success {
		color: #8A8A8A !important;
		font-size: 13px;
		font-weight: unset !important;
	}

	>>>.el-step__title.is-process {
		color: #8A8A8A !important;
		font-size: 13px;
		font-weight: unset !important;
	}

	>>>.el-step__title.is-wait {
		color: #8A8A8A !important;
		font-size: 13px;
		font-weight: unset !important;
	}

	>>>.el-step__head.is-success {
		color: #21D189 !important;
		border-color: #21D189 !important;
	}

	>>>.el-step__head.is-finish {
		color: #21D189 !important;
		border-color: #21D189 !important;
	}

	.step01 {
		width: 30px;
		height: 30px;
		display: inline-block;
		background-repeat: no-repeat;
		background-image: url('../../assets/sIcon90.png');
		background-size: contain;
	}

	.step02 {
		width: 30px;
		height: 30px;
		display: inline-block;
		background-repeat: no-repeat;
		background-image: url('../../assets/sIcon89.png');
		background-size: contain;
	}

	>>>.el-step__icon {
		width: 34px !important;
		height: 31px !important;
	}

	::v-deep .el-step__icon.is-text {
		border-style: hidden;
		background-color: transparent !important;
	}

	::v-deep .el-step__title.is-finish {
		color: #1d1d1d;
		font-size: 14px;
	}

	::v-deep .el-step.is-vertical .el-step__title {
		color: #1d1d1d;
		font-size: 14px;
		font-weight: normal;
	}

	::v-deep .el-step.is-vertical .el-step__line {
		width: 1px;
		top: 12px;
		bottom: 0;
		left: 11px;
		height: 90px;
		color: #DBDBDB;
		background: #DBDBDB;
	}
</style>